<template>
  <div class="">
    <el-card style="max-width: 100%">
      <div class="btn">
        <el-upload
          class="avatar-uploader"
          action="http://10.200.26.30:4000/admin/uploadpicture"
          :show-file-list="false"
          name="picture"
          :data="{ type: 0 }"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
          multiple
        >
          <el-button type="primary" size="large">单击上传</el-button>
        </el-upload>
      </div>
      <div class="bigbox">
        <!-- @click="checkedPicture(picture)" -->
        <div
          class="box"
          v-for="picture in pictures"
          :key="picture.id"
          @click="$emit('click', picture)"
        >
          <img
            :src="'http://10.200.26.30:4000/' + picture.img"
            style="width: 80px; height: 80px"
          />
          <!-- 选中 -->
          <div class="overspread" v-if="picture.id == props.checkedimgInfo.id">
            <el-icon><Check /></el-icon>
          </div>
        </div>
      </div>
      <el-pagination
        small
        background
        layout="prev, pager, next"
        :total="total"
        class="mt-4"
        :page-size="pageSize"
        @change="changePage"
        style="display: flex; justify-content: center"
      />
    </el-card>
  </div>
</template>

<script setup lang="ts">
const props = defineProps(["type", "checkedimgInfo"]);
import { reqGetPicture } from "@/api/picture/index";
import { reqGetPictureData } from "@/api/picture/model";
import { UploadProps } from "element-plus";
const page = ref<number>(1);
const pageSize = ref<number>(32);
const type = props.type;
const total = ref<number>(0);
const pictures = ref<reqGetPictureData[]>([]);

// 图片上传成功后
const handleAvatarSuccess: UploadProps["onSuccess"] = (
  response,
  uploadFile
) => {
  getPicture();
};

// 分页
const changePage = (pageNum: number) => {
  page.value = pageNum;
  getPicture();
};

// 图片上传前
const beforeAvatarUpload: UploadProps["beforeUpload"] = (rawFile) => {
  if (rawFile.type !== "image/jpeg") {
    ElMessage.error("Avatar picture must be JPG format!");
    return false;
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error("Avatar picture size can not exceed 2MB!");
    return false;
  }
  return true;
};

const getPicture = async () => {
  let result = await reqGetPicture({
    type: type,
    page: page.value,
    pageSize: pageSize.value,
  });
  total.value = result.count;
  pictures.value = result.rows;
};

onMounted(() => {
  getPicture();
});
</script>

<style scoped lang="scss">
.el-upload {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  border: 1px dotted rgb(202 194 194);
}

.bigbox {
  display: flex;
  flex-wrap: wrap;

  .box {
    position: relative;
    margin: 10px 15px;

    .del {
      position: absolute;
      top: -8px;
      right: -8px;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 18px;
      height: 18px;
      cursor: pointer;
      background-color: black;
      border-radius: 50%;

      span {
        color: white;
      }
    }

    .overspread {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 30px;
      color: #fff;
      // top: 0;
      // bottom: 0;
      // left: 0;
      // right: 0;
      background: rgb(0 0 0 / 40%);
    }
  }
}

.btn {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.el-dialog {
  height: 300px;
}
</style>
